<template>
  <div>
    <el-row>
      <el-button type="primary" @click="changePage(0)">Preview</el-button>
      {{currentPage}} / {{pageCount}}
      <el-button type="primary" @click="changePage(1)">Next</el-button>
    </el-row>
    <pdf :src="src" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadHandler" />
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: 'Resume',
  components: { pdf },
  data () {
    return {
      currentPage: 0,
      pageCount: 0,
      fileType: 'pdf',
      src: 'static/1.pdf'
    }
  },
  created () {
    this.src = pdf.createLoadingTask(this.src)
  },
  methods: {
    changePage (val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
      }
    },
    loadHandler (e) {
      this.currentPage = 1
    }
  }
}

</script>

<style scoped>

</style>
